<template>
  <div class="circle-page">
    <div class="item">
      <div class="group">
        <b-circle :percent="percent"></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
      <div class="group">
        <b-circle :percent="percent" :stroke-color="['var(--warning)','var(--success)']"></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>

      <div class="group">
        <b-circle
          :percent="percent"
          :stroke-color="['var(--joker)','var(--success)']"
          :stroke-width="40"
        ></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="group">
        <b-circle
          
          :percent="percent"
          :stroke-color="['var(--success)','var(--warning)']"
          :size="200"
        />
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>

      <div class="group">
        <b-circle
          :percent="percent"
          :stroke-color="['var(--error)','var(--info)']"
          :size="200"
          :stroke-width="40"
        ></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
      <div class="group">
        <b-circle
          :percent="percent"
          :stroke-color="['var(--joker)','var(--error)']"
          :size="200"
          :stroke-width="60"
        ></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="group">
        <b-circle
          dashboard
          show-icon
          :percent="percent"
          :stroke-color="['var(--success)','var(--info)']"
          :size="120"
        />
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>

      <div class="group">
        <b-circle
          dashboard
          show-icon
          :percent="percent"
          :stroke-color="['var(--info)','var(--nav)']"
          :size="120"
          :stroke-width="40"
          icon-size="24px"
          font-size="18px"
        ></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
      <div class="group">
        <b-circle
          dashboard
          show-icon
          :percent="percent"
          :stroke-color="['var(--asidebar)','var(--error)']"
          :size="120"
          :stroke-width="20"
        ></b-circle>
        <div>
          <b-button font-size="18px" @click="add" type="primary">+</b-button>
          <b-button font-size="18px" @click="reduce">-</b-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CirclePage",
  data() {
    return {
      percent: 0,
      testP:0,
    };
  },
  methods: {
    add() {
      this.percent += 5;
      if (this.percent > 100) this.percent = 0;
    },
    reduce() {
      this.percent -= 5;
      if (this.percent < 0) this.percent = 100;
    },
    test(){
      this.testP+=10;
    }
  },
};
</script>
<style scoped>
.circle-page {
  padding: 40px 0px;
}
.item {
  width: 100%;
  display: flex;
  margin-top: 15px;
}
.group {
  text-align: center;
  margin-right: 10px;
}
</style>